<template>
  <div class="bg-w main"
    v-show="loadSu">
    <div class="index-bg"
      v-show="!hideBgImg"
      @click="hideBg">
      <image :src="indexData.bgImg"
        class="full-img"
        alt=""
        @load="loadDone"
        width="100%"></image>
    </div>
    <div v-show="hideBgImg">
      <img :src="indexData.image_text"
        class="banner">
      <div class="pd-f20 t-title">
        <div class="title fs-20 b">{{ indexData.name }}</div>
        <div class="desc w-b fs-16 mg-t10">{{ indexData.desc }}</div>
      </div>
      <div>
        <div v-for="(item,index) in list"
          :key="index"
          @click="itemClick(item)"
          class="flex item">
          <div class="fs-18 flex1 mg-r20">
            {{ item.name }}
          </div>
          <img :src="item.image_text"
            class="item-img flex0"
            alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetail, getList } from '../../api/common'
import { getUrlParam, sleep } from '../../utils/j'
export default {
  props: {

  },
  components: {

  },
  onLoad(argData) {

  },
  onShow() {

  },
  onReady() {

  },
  onUnload() {

  },
  async onPullDownRefresh() {
    // console.log('下拉')
    uni.stopPullDownRefresh()
  },
  async onReachBottom() {
    // console.log('上拉')
  },
  computed: {

  },
  data() {
    return {
      loadSu: false,
      hideBgImg: false,
      indexData: {
        bgImg: '',
        name: '',
        desc: '',
        image_text: '',
      },
      list: []
    }
  },
  methods: {
    hideBg() {
      this.hideBgImg = true
    },
    itemClick(argItem) {
      this.$f.toPage('detail', { id: argItem.id })
    },
    async getData() {
      let data = {
        theme_info_id: getUrlParam('id') || 1
      }
      let res = await getDetail(data)
      this.loadSu = true
      this.indexData = res
      this.indexData.bgImg = res.screen_image_text
      this.getList()
    },
    async loadDone(argData) {
      await this.$f.sleep(3000)
      this.hideBgImg = true
    },
    async getList() {
      let data = {
        theme_info_id: getUrlParam('id') || 1
      }
      let res = await getList(data)
      this.list = res
    },
    init() {
      this.getData()
    }
  },
}
</script>

<style lang="scss">
.main {
  .index-bg {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    img {
      display: block;
    }
  }
  .banner {
    width: 100%;
    height: 190px;
    object-fit: cover;
  }
  .t-title {
    position: relative;
    z-index: 2;
    // margin-top: 185px;
    background-color: #fff;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: 1px solid #cecece;
  }
  .desc {
    color: #859098;
  }
  .item {
    border-bottom: 1px solid #f1f1f1;
    padding: 14px 20px;
  }
  .item-img {
    width: 116px;
    height: 86px;
    background: rgba(231, 231, 231, 1);
    border-radius: 3px;
    object-fit: cover;
  }
  .full-img {
    width: 100%;
    height: auto;
    /deep/img {
      opacity: 1;
      position: relative;
    }
  }
}
</style>
